<template>
    <div class="expert-library-container">
        <div class="swiper_container">
            <transition name="fade">
                <div class="swiper_wrapper">
                    <div
                        @click="chooseItem(item, index)"
                        v-for="(item, index) in exportList"
                        :style="config5[index]"
                        :key="index"
                        class="swiper_slide"
                    >
                        <div class="img_box">
                            <img :src="item.avator" />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="position">
                            <p v-for="(position, i) in item.position" :key="i">
                                {{ position }}
                            </p>
                        </div>
                        <div class="desc">
                            {{ item.desc }}
                        </div>
                        <div class="btn">
                            详细介绍<i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    name: "ExpertLibrary",
    data() {
        return {
            loading: true,
            currentIndex: 3, //当前中间imgs数组中index
            centerInfo: "", // 当前中间信息
            startX: "",
            endX: "",
            exportList: [
                {
                    index: 0,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员1", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 1,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员2", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 2,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员3", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 3,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员4", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 4,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员5", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 5,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员6", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 6,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员7", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
                {
                    index: 7,
                    avator: require("@/assets/images/expertLibrary_img.jpg"),
                    position: ["中国土木工程学会会员8", "中国建筑智库专家"],
                    name: "张宏伟",
                    desc: "英皇建筑师协会会员。曾就读于中欧国际工商管理学院与哈佛研究生院。1992年移民加拿大。曾被《设计新潮》等多家刊物专访，到多处讲学，发表学术论文多篇。",
                },
            ],
            previous: 0,
            config5: [
                {
                    id: "-A",
                    position: "absolute",
                    width: "22%",
                    transform: "scale(0.7)",
                    top: "0",
                    left: "0%",
                    opacity: 1,
                    zIndex: 1,
                    transition: ".4s",
                },
                {
                    id: "A",
                    position: "absolute",
                    width: "22%",
                    transform: "scale(0.8)",
                    top: "0",
                    left: "12%",
                    opacity: 1,
                    zIndex: 2,
                    transition: ".4s",
                },
                {
                    id: "B",
                    position: "absolute",
                    width: "25%",
                    transform: "scale(0.9)",
                    top: "0",
                    left: "24%",
                    opacity: 1,
                    zIndex: 3,
                    transition: ".4s",
                },
                {
                    id: "center",
                    position: "absolute",
                    width: "30%",
                    transform: "scale(1)",
                    top: "0px",
                    left: "50%",
                    marginLeft: "-15%",
                    opacity: 1,
                    zIndex: 4,
                    transition: ".4s",
                },
                {
                    id: "D",
                    position: "absolute",
                    width: "25%",
                    transform: "scale(0.9)",
                    top: "0",
                    left: "51%",
                    opacity: 1,
                    zIndex: 3,
                    transition: ".4s",
                },
                {
                    id: "E",
                    position: "absolute",
                    width: "25%",
                    transform: "scale(0.8)",
                    top: "0",
                    left: "63%",
                    opacity: 1,
                    zIndex: 2,
                    transition: ".4s",
                },
                {
                    id: "E+",
                    position: "absolute",
                    width: "25%",
                    transform: "scale(0.7)",
                    top: "0",
                    left: "75%",
                    opacity: 1,
                    zIndex: 1,
                    transition: ".4s",
                },
            ],
        };
    },
    methods: {
        // 获取数据
        async getData() {
            this.$nextTick(() => {
                this.loading = false;
            });
        },
        // 滑动上一个
        prev(index) {
            // this.imgs.unshift(this.imgs.pop());
            console.log(`index`, index);
            this.config5.push(this.config5.shift());
            this.currentIndex = this.currentIndex - 1;
            if (this.currentIndex < 0) {
                this.currentIndex = this.imgs.length - 1;
            }
            this.centerCard();
            this.centerIndex("prev");
        },
        // 滑动下一个
        next() {
            // this.imgs.push(this.imgs.shift());
            this.config5.unshift(this.config5.pop());
            this.currentIndex = this.currentIndex + 1;
            if (this.currentIndex > this.imgs.length - 1) {
                this.currentIndex = 0;
            }
            this.centerCard();
            this.centerIndex("next");
            // console.log(this.currentIndex);
        },
        // 当前imgs在位置上的index（并非img数组的index）
        centerIndex(val) {
            if (val == "prev") {
                for (let val of this.imgs) {
                    if (val.index == this.imgs.length - 1) {
                        val.index = 0;
                    } else {
                        val.index = val.index + 1;
                    }
                }
            } else {
                for (let val of this.imgs) {
                    if (val.index == 0) {
                        val.index = this.imgs.length - 1;
                    } else {
                        val.index = val.index - 1;
                    }
                }
            }
        },
        // 点击
        chooseItem(item, index) {
            console.log(`index`, index);
            let cycles = item.index;
            if (item.index < 3) {
                for (let i = 0; i < 3 - cycles; i++) {
                    console.log(item.index);
                    this.prev();
                }
            } else if (item.index > 3) {
                for (let i = -1; i < item.index - 3; i++) {
                    this.next();
                }
            } else if (item.index == 3) {
                console.log("投票");
            }
        },
        // 计算中间卡片信息
        centerCard() {
            this.centerInfo = this.imgs[this.currentIndex];
            this.$emit("centerInfo", this.centerInfo);
        },

        addCardStyle() {
            if (this.exportList.length > 7) {
                let addtime = this.exportList.length - 7;
                for (let i = 0; i < addtime; i++) {
                    console.log("add");
                    this.config5.push({
                        id: "center",
                        position: "absolute",
                        width: "45%",
                        height: "100%",
                        top: "0px",
                        left: "50%",
                        marginLeft: "-22.5%",
                        opacity: 0,
                        transition: ".1s",
                    });
                }
            }
        },
    },
    created() {
        this.getData();
        this.centerCard(); // 获取中间卡片信息
        this.addCardStyle(); // 加入样式位置的index
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.expert-library-container {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("~@/assets/images/expertLibrary_bg.png") top left
            no-repeat;
        background-size: 100% 100%;
        z-index: -1;
    }
    .swiper_container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .swiper_wrapper {
            height: 100%;
            position: relative;
            overflow: hidden;
            .swiper_slide {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                opacity: 0;
                background-image: linear-gradient(to bottom, #68b4ff, #ffffff);
                .img_box {
                    width: 94px;
                    height: 94px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .name {
                    color: #222222;
                    font-size: 22px;
                    font-weight: 600;
                    margin: 20px 0;
                }
                .position {
                    color: #919599;
                    font-size: 14px;
                    p {
                        line-height: 30px;
                        text-align: center;
                    }
                }
                .desc {
                    color: #5c6166;
                    font-size: 14px;
                    text-indent: 2em;
                    margin: 20px 0;
                    width: 50%;
                    line-height: 25px;
                }
                .btn {
                    .default-btn();
                    padding: 0 30px;
                }
            }
        }
    }
}
</style>